<meta charset="UTF-8">
<style>
    .container{
        width: 40%;
        margin: 20px auto;
    }
    .common{
        width:230px;
        height: 30px;
    }
    span{
        display:inline-block;
        width: 150px;
        text-align: right;
    }
    div{
        margin-bottom: 10px;
    }
</style>
<form class="container">
    <!-- ********* Begin ********* -->
    <div>
        <span>用户名：</span>
        <input type="text" class="common">
    </div>
    <div>
        <span>昵称：</span>
        <input type="text" class="common">
    </div>
    <div>
        <span>性别：</span>
        <label for="male"><input type="radio" name="sex" id="male"> 男</label>
        <label for="female"><input type="radio" name="sex" id="female"> 女</label>
        <label for="other"><input type="radio" name="sex" id="other" disabled> 保密</label>
    </div>
    <div>
        <span>教育程度：</span>
        <select class="common" name="education">
            <option>高中</option>
            <option>中专</option>
            <option>大专</option>
            <option selected>本科</option>
            <option>硕士</option>
            <option>博士</option>
            <option>其他</option>
        </select>
    </div>
    <div>
        <span>婚姻状况：</span>
        <label for="single"><input type="radio" name="state" id="single" checked> 未婚</label>
        <label for="married"><input type="radio" name="state" id="married"> 已婚</label>
        <label for="secret"><input type="radio" name="state" id="secret"> 保密</label>
    </div>
    <div>
        <span>兴趣爱好：</span>
        <label for="football"><input type="checkbox" name="hobby" id="football"> 踢足球</label>
        <label for="basketball"><input type="checkbox" name="hobby" id="basketball"> 打篮球</label>
        <label for="film"><input type="checkbox" name="hobby" id="film" checked> 看电影</label>
    </div>
    <div>
        <span>描述自己的特点：</span>
        <textarea class="common" maxlength="20"></textarea>
    </div>
    <div>
        <span></span>
        <input type="submit" class="common" value="提交">
    </div>
    <!-- ********* End ********* -->
</form>